<style scoped lang="sass">
    div{
        position:relative;
        .calendar{
            box-sizing: border-box;
            height:35px;
            line-height:35px;
            border:solid 1px #ddd;
            background:#fff;
            padding-left:10px;
        }
        .img,img{
            position:absolute;
            width:25px;
            height:25px;
            right:5px;
            top:5px;
            cursor:pointer;
        }
    }
</style>
<template>
    <div :style="option.style">
        <input 
            @input="input($event)"
            class="calendar"
            :style="option.style" 
            :value="value">
        <img :id="json.elem.substring(1,json.elem.length)" src="" alt="">
    </div>
</template>
<script>
    export default{
        /*
            **option参数**
            @param elem         绑定元素                 String/DOM
            @param type         控件选择类型              String  (year/month/date/time/datetime)
            @param range        开启左右面板范围选择        Boolean/String
            @param format       自定义显示格式             String
            @param value        初始值                   String
            @param min/max      最小/大范围内的日期时间值   String
            @param showBottom   是否显示底部栏             Boolean
            @param btns         工具按钮                 Array   ['clear', 'now', 'confirm']
            @param done         执行了日期确认回调         Function(value, date, endDate) 点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
        */
        props:{
            option:{
                type:Object,
                default(){
                    return {}
                }
            },
            value:{
                type:String,
                default:''
            }
        },
        data(){
            return {
                json:{
                    elem:'#calendar',   
                    format:'yyyy/MM/dd HH:mm:ss',  
                    value:'',
                    min:'',
                    max: '',     
                    zindex:100,
                    range:false,
                    btns:['clear', 'now', 'confirm'],
                    done:(value, date, endDate)=>{
                        this.$emit('update:value',value)
                    }
                },
            }
        },
        watch:{
            'value'(val){
                this.init();
            }
        },
        created(){
            this.rangeStyle();
        },
        mounted(){
            this.$nextTick(()=>{
                this.init();
            });
        },
        methods:{
            init(){
                this.json = Object.assign(this.json,this.option)
                this.json.value = this.value
                laydate.render(this.json)
            },
            rangeStyle(){
                let style = {}
                if(this.json.range){
                    style.width = '300px'
                }else{
                    style.width = '180px'
                }
                style = Object.assign(this.option.style||{},style);
                let option = JSON.parse(JSON.stringify(this.option))
                option.style = style
                this.$emit('update:option',option)
            },
            input(e){
                this.$emit('update:value',e.target.value)
            }
        }
    }
</script>